<template>
  <bc-modal v-show="show" ref='modal'>
    <slide-up :show="show">
      <div class="all-lotterys" ref="contents">
        <div class="contents">
          <div
            class="content button-unselected"
            :class="activeIndex == index ? 'button-selected' : ''"
            v-for="(item, index) in listData" 
            :key="item.id"
            @click="chooseReportType(index)"
            >
            <span>{{item.name}}</span>
          </div>
        </div>
      </div>
    </slide-up>
  </bc-modal>
</template>

<script>
import SlideUp from '@/components/slide-up/slide-up'
import BcModal from '@/components/base/bc-modal/bc-modal'
export default {
  components: {
    SlideUp,
    BcModal 
  },
  props: {
    listData: {
      type: Array,
      default: function() {
        return [
          {
            id: 1,
            name: '消费',
            type: 'consume'
          },
          {
            id: 2,
            name: '中奖',
            type: 'benefit'
          },
          {
            id: 3,
            name: '彩票返点',
            type: 'lottryrefund'
          },
          {
            id: 4,
            name: 'BJ返水',
            type: 'bjrefund'
          },
        ]
      }
    },
    show: {
      type: Boolean,
      default: false
    },
    
  },
  mounted() {
    this.modal = this.$refs.modal.$el 
    this.contents = this.$refs.contents 
    this.modal.addEventListener('click', (e) => {
      if (!this.contents.contains(e.target)) {
        this.$emit('hide')
      }
    })
  },
  destroyed() {
    this.modal.removeEventListener('click', (e) => {
      if (!this.contents.contains(e.target)) {
        this.$emit('hide')
      }
    })
  },
  data() {
    return {
      activeIndex: 0
    }
  },
  
  methods: {
    chooseReportType(index) {
      this.activeIndex = index
      this.$emit('click', index)
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
  .slide-up 
    width 100% 
    max-height 340px 
    border-top-right-radius 10px 
    border-top-left-radius 10px 
    background #fff
    position absolute 
    bottom 0 
    right 0
    left 0
    z-index 999999
    box-sizing border-box 
    padding 24px 24px 14px 24px
    overflow scroll
    &.slide-enter, &.slide-leave-to 
      transition all 0.2s 
    &.slide-enter-active, &.slide-leave-active 
      transform translate3d(0, 100%, 0)
    .all-lotterys 
      .contents 
        display flex 
        flex-wrap wrap 
        align-items center
        justify-content space-between 
        width 100%
        height 100% 
        box-sizing border-box 
        .content 
          box-sizing border-box 
          width calc((100% - 20px) / 3) 
          height 32px
          line-height 32px
          text-align center
          margin-bottom 10px
          color $color-theme-dark
          &.button-selected 
            color #fff
</style>